<template>
    <div class="content_container">
        <h1>发表评论</h1>
        <hr>
        <textarea placeholder="请输入要BB的内容（最多BB120个子）" v-model="content">

        </textarea>
        <mt-button  type="primary" size="large" @click="add">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,index) in contentList" :key="item.dateTime">
                <div class="header">
                    第{{index+1}}楼&nbsp;&nbsp;用户：{{item.userName}}&nbsp;&nbsp;发表时间：{{item.dateTime}}
                </div>
                <div class="body">
                    {{item.content}}
                </div>
            </div>
        </div>

        <mt-button  type="danger" size="large" @click="getContents">加载更多</mt-button>
    </div>
</template>

<script>
import moment from 'moment';
export default {
    data(){
        return {
            content:'',
            contentList:[
                {userName:"aaaa",dateTime:"2019-04-21 12:23:35",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:36",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:37",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:38",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:39",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:30",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:34",content:"ssssaaaaaaa"}
                
            ],
            pageInfo:[
                {userName:"aaaa",dateTime:"2019-04-21 12:23:31",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:32",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:33",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:14",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:24",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:44",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:54",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:21",content:"ssssaaaaaaa"},
                {userName:"aaaa",dateTime:"2019-04-21 12:23:22",content:"ssssaaaaaaa"}
            ]
        }
    },
    methods:{
        add(){
            let temp={};
            temp.name = "bbbbbb",
            temp.dateTime = moment().format("yyyy-MM-dd HH:mm:ss")
            temp.content =this.content;
            this.contentList.unshift(temp);
        },
        getContents(){
            this.contentList=this.contentList.concat(this.pageInfo);
        }
    },
    filters:{
        dateFormat: function (value) {
　　　　　　return moment(value).format("yyyy-MM-dd HH24:hi:ss")
　　　　}
    }
}
</script>
<style lang="less" scoped>
.content_container{
    h1{
        font-size: 16px;
    }
    textarea{
        margin-bottom: 0;
        font-size: 14px;
        height: 85px;
    }
    .cmt-list{
        font-size: 13px;
        .cmt-item{
            .header{
                line-height: 30px;
                background-color: rgb(189, 181, 181);
            }
            .body{
                line-height: 35px;
                text-indent: 25px;
            }
        }
    }
}
</style>

